<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="./node_modules/vue/dist/vue.js"></script>
		<script src="./node_modules/vue-resource/dist/vue-resource.js"></script>
	</head>
	<body>
		<div id="app" class="container">
			<h1>vue-resource插件讲解</h1>
			<a href="javascript:;" class="btn btn-primary"  v-on:click="get">Get请求</a>
			<a href="javascript:;" class="btn btn-primary" @click="post" >Post请求</a>
			<a href="javascript:;" class="btn btn-primary" @click="jsonp">jsonp请求</a>
			<div>
				<span>{{msg}}</span>
			</div>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data:{
					msg: ''
				},
				mounted (){
					//全局拦截器
					// loding的处理和错误拦截的处理
					Vue.http.interceptors.push(function(request,next){
						console.log("request init.");//请求前
						next(function(response){
							console.log("response init.");//请求后
							return response;
						})
					})
				},
				methods:{
					get: function(){
						this.$http.get("http://www.imooc.com/course/AjaxCourseMembers?ids=796",{
							params:{
								userId: '101'
							},
							headers:{
								token: 'abcd'
							}
						}).then((res) => {
							console.log(res.data);
							this.msg = res.data;
						},(error)=>{
							this.msg = error
						})
					},
					post: function(){
						this.$http.post("package.json",{
							id: '1111',
							userId: "102"
						},{
							headers: {
								access_token: "abc"
							}
						}).then((res)=>{
							this.msg = res.data;
						},(error)=>{
							this.msg = error;
						})
					},
					jsonp:function() {
						this.$http.jsonp("http://www.imooc.com/course/AjaxCourseMembers?ids=796").then((res) => {
							this.msg = res.data
						})
					}
				}
			})
		</script>
	</body>
</html>
